<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="/static/js/mui.min.js"></script>
    <link href="/static/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/dist/css/sm.min.css">
    <link rel="stylesheet" href="/static/dist/css/sm-extend.min.css">
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        button {
            float: left;
        }
    </style>
</head>
<body>
<div class="page">
    <header class="mui-bar mui-bar-nav">
        <h1 class="title">添加单词</h1>
    </header>
    <nav class="bar bar-tab">
        <a class="tab-item" href="/index">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="tab-label">刷词模式</span>
        </a>
        <a class="tab-item" href="/unit_list">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="tab-label">看词模式</span>
        </a>
        <a class="tab-item active" href="#">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="tab-label">添加单词</span>
        </a>
    </nav>
    <div class="content">
        <br/>
        <br/>
        <div class="mui-content">
            <div class="mui-card">
                <h5 class="mui-content-padded">章节序号</h5>
                <div class="mui-input-row">
                    <label>章节</label>
                    <div class="mui-numbox" data-numbox-min="1">
                        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                        <input class="mui-input-numbox" type="number" id="unit_num">
                        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                    </div>

                </div>

            </div>
            <div class="mui-card" style="margin-bottom: 1px">
                <h5 class="mui-content-padded">单词列表</h5>
                <div class="mui-input-row">
                    <textarea id="textarea" rows="8" placeholder="输入单词,以英文逗号分隔(不要回车换行,让他自动换)"
                              style="border-bottom: 5px;border-left: 5px;border-right: 5px"></textarea>

                </div>
            </div>

        </div>

        <button type="button" class="mui-btn mui-btn-primary mui-btn-block"
                style="margin-top:10px; margin-left: 10px;width: 95%" id="add">添加
        </button>
    </div>

</div>


</body>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src='/static/dist/js/sm.js'></script>
<script src='/static/dist/js/sm-extend.js'></script>
<script src='/static/dist/layer/layer.js'></script>

<script>

    $(function () {
        $("#add").click(function () {
            let unit_num = $("#unit_num").val();
            let words = $("textarea").val();
            if (words.length === 0) {
                mui.toast("还没有录入单词");
            } else {
                $.ajax({
                    url: "/add_words?unit_num=" + unit_num + "&words=" + words,
                    method: "GET",
                    async: false,
                    success: function () {
                        mui.toast("添加成功");
                    }
                })
            }
        })
    });
</script>
</html>
